<template>
	<view class="">
		<view class="top">
			<!-- #ifdef MP || APP-PLUS -->
			<view class="sys-head">
				<view class="sys-bar" :style="{height:sysHeight}"></view>
				<!-- #ifdef MP -->
				<view class="sys-title">
					<navigator style="display: flex;align-items: center;justify-content: center;" open-type="navigateBack" delta='1'><image  src="../../../static/images/backnav.png" mode=""></image></navigator><text>我的兑换码</text>
					</view>
				<!-- #endif -->
				<view class="bg"></view>
			</view>
			<!-- #endif -->
		</view>
		<scroll-view scroll-y="true" :style="{height:scrollBoxHeight}" id="scrollBox" >
			
		
		<view class="conbox">
			<view class="iptcode">
				<input type="text" placeholder="请输入兑换码ID" v-model="id" />
			</view>
			<view class="yanzheng">
				<input type="text" placeholder="请输入兑换码编号" v-model="code" />
				<view class="dhmyzbtn" @click="checkcodema">
					验证兑换码
				</view>
			</view>
			<view class="dhmcon" v-if="checkobj.code">
					<view class="">
						兑换码：{{checkobj.code}}
					</view>
					<view class="">
						可兑换：{{checkobj.goods_name}}
					</view>
					<view class="">
						有效期：{{checkobj.sdate}} - {{checkobj.edate}}
					</view>
					<view class="">
						说 明：{{checkobj.desc}}
					</view>
			</view>
			<view class="surebtn" @click="surebtnma">
				确认兑换
			</view>
		</view>
		
		<view class="shuoming">
			<view class="">
				使用说明：
			</view>
			<view class="">
				1.一张券只能绑定一个用户，以兑换时间先后为准
			</view>
			<view class="">
				2.兑换券可以在兑换专区兑换指定的商品。
			</view>
			<view class="">
				3.兑换券不可以兑换成现金
			</view>
			<view class="">
				4.兑换卡ID为卡片上5位数子
			</view>
			<view class="">
				5.如果兑换中遇到问题请到公众号联系我们的客服为您解决。
			</view>
		</view>
		<view class="bstips">
			<view class="">
				弗洛花园 @ 生活本该如此
			</view>
			<view class="">
				客服电话400-1800-520
			</view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import {code_check_active, code_exList} from '@/api/user.js'
	export default {
		data() {
			return {
				ad:23,
				sysHeight: sysHeight,
				scrollBoxHeight:0,
				id:'',
				code:'',
				oper:'',
				ischecked:false,
				sureparams:{
					id:'',
					code:'',
				},
				checkobj:{}
			}
		},
		onLoad() {
			uni.setNavigationBarColor({
				 frontColor: '#ffffff',
				 backgroundColor: '#C7ED67'
			})
			},
			methods:{
				async checkcodema(){
					if(!this.id){
						return uni.showToast({
							title:'兑换码ID不能为空',
							icon:'none'
						})
					}
					if(!this.code){
						return uni.showToast({
							title:'兑换码编号不能为空',
							icon:'none'
						})
					}
					var sendData = {
						id:this.id,
						code:this.code,
						oper:'check'
					}
					console.log(sendData)
					var res = await code_check_active(sendData)
					if(res.status == 400){
						return uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
					uni.showToast({
						title:'验证通过',
						icon:'none'
					})
					this.sureparams.id = this.id
					this.sureparams.code = this.code
					this.checkobj = res.data
					console.log(res)
				},
				async surebtnma(){
					if(!this.sureparams.id){
						return uni.showToast({
							title:'请先验证兑换码',
							icon:'none'
						})
					}
					if(!this.sureparams.code){
						return uni.showToast({
							title:'请先验证兑换码',
							icon:'none'
						})
					}
					var sendData = {
						...this.sureparams
					}
					sendData.oper = 'exchange'
					console.log(sendData,"1234567")
					console.log("确认兑换")
					uni.showLoading({
						title:"添加中...",
						mask:true
					})
					var res = await code_check_active(sendData)
					if(res.status == 400){
						return uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
					var pages = getCurrentPages();
					uni.showToast({
						title:'添加成功',
						mask:true,
						icon:"none",
						success:res=>{
							setTimeout(function(){
								console.log(pages)
								var page = pages[pages.length - 2];
								console.log(page)
								page.setData({
									status:0
								})
								console.log(page,888)
								uni.navigateBack({
									delta:1
								})
							},1500)
						}
					})
				},
			},
			
			onReady() {
				let self = this
				// #ifdef MP
				let info = uni.createSelectorQuery().select(".sys-head");
				info.boundingClientRect(function(data) { //data - 各种参数
					self.mpHeight = data.height
				}).exec()
				// #endif
				
				var systemHeight = uni.getSystemInfoSync().windowHeight
				uni.createSelectorQuery().select('#scrollBox').boundingClientRect((rect) => {
					var top = systemHeight - rect.top
					this.scrollBoxHeight = top + 'px'
				}).exec()
			},
	}
	
</script>

<style lang="scss" scoped> 
	.sys-head {
		position: relative;
		width: 100%;
		// background: linear-gradient(90deg, $bg-star1 0%, $bg-end1 100%);
	
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: url("~@/static/images/home_bg.png") no-repeat;
			background-size: 100% 100%;
			background-position: left bottom;
		}
	
		.sys-title {
			z-index: 10;
			position: relative;
			height: 43px;
			text-align: center;
			line-height: 43px;
			font-size: 36rpx;
			color: #FFFFFF;
			display:flex;
			align-items: center;
			image{
				width:45rpx;
				height:38rpx;
				margin-right:18rpx;
				margin-left:30rpx;
			}
		}
	}
	.conbox{
		width:600rpx;
		box-sizing: border-box;
		margin:auto;
		.iptcode{
			width:100%;
			height: 82rpx;
			background: #FFFFFF;
			border: 2rpx solid #D3D2D2;
			border-radius: 8rpx;
			text-align:center;
			margin-bottom:20rpx;
			margin-top:50rpx;
			input{
				width:100%;
				height:100%;
				text-align: center;
			}
		}
		.yanzheng{
			width:100%;
			display:flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom:87rpx;
			input{
				width: 388rpx;
				height: 82rpx;
				background: #FFFFFF;
				border: 2rpx solid #D3D2D2;
				border-radius: 8rpx;
				text-align:center;
				font-size: 26rpx;
				font-weight: 300;
				color: #333333;
			}
			.dhmyzbtn{
				width: 190rpx;
				height: 82rpx;
				background: #95C51B;
				border-radius: 8rpx;
				font-size: 26rpx;
				font-family: SourceHanSansCN;
				font-weight: 300;
				color: #FFFFFF;
				text-align:center;
				line-height:82rpx;
			}
		}
		.dhmcon{
			width: 600rpx;
			height: 242rpx;
			background: #FFFFFF;
			border: 3rpx solid #D3D2D2;
			border-radius: 8rpx;
			margin:auto;
			margin-bottom:40rpx;
			padding:28rpx 0 20px 33rpx;
			view{
				margin-bottom:8rpx;
				font-size: 26rpx;
				font-family: SourceHanSansCN;
				font-weight: 300;
				color: #333333;
			}
		}
		.surebtn{
			width: 406rpx;
			height: 82rpx;
			background: #95C51B;
			border-radius: 41rpx;
			margin:auto;
			font-size: 26rpx;
			font-weight: 300;
			color: #FFFFFF;
			margin-bottom:140rpx;
			text-align:center;
			line-height:82rpx;
		}
	}
	
	.shuoming{
		width:600rpx;
		font-size: 26rpx;
		font-family: SourceHanSansCN;
		font-weight: 300;
		color: #A5A5A5;
		margin:auto;
	}
	.bstips{
		width:600rpx;
		margin:auto;
		margin-top:160rpx;
		margin-bottom:160rpx;
		
	}
	.bstips>view:first-child{
		font-size: 26rpx;
		font-weight: normal;
		color: #E14669;
		text-align:center;
		margin-bottom:26rpx;
	}
	.bstips>view:last-child{
		font-size: 26rpx;
		font-weight: 300;
		color: #666666;
		text-align:center;
	}
</style>
